<template>
    <div class="yx-form-box">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <div class="form-message" :class="{'form-message-transition': message}" v-text="content.msg"/>
        <form action="" :id="`form${brickInfo.index}`">
            <div class="form-item"
                 v-for="(item, index) in content.formItem"
                 :key="index">
                <div class="item-label-box">
                    <div class="item-label" v-text="item.label"/>
                    <font class="label-required-icon" v-if="item.required">*</font>
                </div>
                <div class="form-input-box">
                    <input class="form-input"
                           :type="item.text"
                           :index="index"
                           :placeholder="item.placeholder"
                           v-model="item.value"
                           @focus="itemFocus"/>
                </div>
                <div class="form-input-error" v-if="!item.status" v-text="item.error"/>
            </div>
            <div class="form-item">
                <div :style="bgColor + color + bdRadius"
                     class="form-input form-submit"
                     v-text="content.text"
                     @click="submitAction(`form${brickInfo.index}`);"/>
            </div>
        </form>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import {formSubmit} from '@/api/edit';

    export default {
        name: 'YXForm',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false
                    };
                }
            },
            appearance: {
                radius: '4',
                bgColor: {
                    color: 'rgba(253, 65, 95, 1)'
                },
                color: {
                    color: 'rgba(255, 255, 255, 1)'
                }
            },
            content: {
                text: '提交',
                msg: '感谢您的认真填写，内容已经提交成功！',
                formItem: [
                    // type: text、number、email
                    {
                        type: 'text',
                        label: '姓名',
                        value: '',
                        error: '',
                        status: true,
                        placeholder: '',
                        required: false
                    },
                    {
                        type: 'number',
                        label: '手机',
                        value: '',
                        error: '',
                        status: true,
                        placeholder: '',
                        required: false
                    },
                    {
                        type: 'text',
                        label: '地址',
                        value: '',
                        error: '',
                        status: true,
                        placeholder: '',
                        required: false
                    }
                ]
            },
            shortIndex: {
                type: String,
                default: ''
            },
            tid: ''
        },
        components: {
            Hover
        },
        data() {
            return {
                message: false
            };
        },
        watch: {
            // 监听数据变化，赋值tid
            'content.formItem'(formItems) {
                for (var i = 0; i < formItems.length; i++) {
                    formItems[i].tid = new Date().getTime() + i;
                }
            }
        },
        computed: {
            bgColor() {
                return `background-color: ${this.appearance.bgColor.color};`;
            },
            color() {
                return `color: ${this.appearance.color.color};`;
            },
            bdRadius() {
                return `border-radius: ${this.appearance.radius}px;`;
            }
        },
        methods: {
            submitAction() {
                if (!this.checkItems()) {
                    return;
                } else {
                    let params = {
                        tid: this.tid,
                        short_index: this.shortIndex,
                        data: []
                    };
                    let formItem = this.content.formItem;

                    for (let item of formItem) {
                        params.data.push({
                            tid: item.tid,
                            type: 'cform',
                            value: item.value
                        });
                    }
                    params.data = JSON.stringify(params.data);

                    params.short_index && formSubmit(params).then(res => {
                        if (res.code === 0) {
                            this.showMsg();
                        }
                    });
                }
            },
            checkItems() {
                let items = this.content.formItem;
                for (let item of items) {
                    if (item.type === 'text') {
                        if (item.value) {
                            item.status = true;
                        } else if (item.required && !item.value) {
                            item.status = false;
                            return false;
                        }
                    } else if (item.type === 'number' && (item.required || item.value)) {
                        let s = this.checkValue('number', item.value);
                        item.status = s;
                        if (!s) return false;
                    } else if (item.type === 'email' && (item.required || item.value)) {
                        let s = this.checkValue('email', item.value);
                        item.status = s;
                        if (!s) return false;
                    }
                }
                return true;
            },
            itemFocus(ev) {
                let i = ev.target.getAttribute('index');
                this.content.formItem[i].status = true;
            },
            showMsg() {
                this.message = true;
                let timer = setTimeout(_ => {
                    this.message = false;
                    clearTimeout(timer);
                }, 2000);
            },
            checkValue(type, val) {
                let reg = {
                    number: /^\d+$/,
                    email: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
                };
                return reg[type].test(val);
            }
        }
    }
</script>

<style scoped lang="scss">
    @mixin text-ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .yx-form-box {
        position: relative;
        .form-message {
            display: none;
            min-width: 200px;
            max-width: 90%;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 400;
            color: #67c23a;
            border-radius: 4px;
            border: 1px solid #e1f3d8;
            background-color: #f0f9eb;

            @include text-ellipsis;

            position: fixed;
            top: -41px;
            left: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }
        .form-message-transition {
            display: block;
            top: 10px;
            z-index: 2001;
            transition: top .3s;
        }
        .form-item {
            padding: 10px;
            position: relative;

            .item-label-box {
                height: 16px;
                margin-bottom: 8px;
                line-height: 16px;
                display: flex;
                justify-content: flex-start;

                .item-label {
                    height: 100%;
                    width: fit-content;
                    font-size: 16px;
                    max-width: calc(100% - 6px);
                    color: #a7a7a7;
                    @include text-ellipsis;
                }
                .label-required-icon {
                    line-height: 16px;
                    text-indent: 1px;
                    color: red;
                }
            }
            .form-input-box {
                height: 40px;
                input {
                    height: 100%;
                }
            }
            .form-input {
                width: 100%;
                height: 28px;
                line-height: 28px;
                padding: 0;
                font-size: 16px;
                outline: none;
                margin-top: 2px;
                padding: 0 15px;
                border: 1px solid #dcdfe6;
                border-radius: 4px;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            }
            .form-input-error {
                height: 12px;
                font-size: 12px;
                color: #f56c6c;
                position: absolute;
                top: calc(100% - 10px);
                left: 10px;
            }
            .form-submit {
                height: 44px;
                line-height: 44px;
                margin-top: 0;
                font-size: 16px;
                text-align: center;
                user-select: none;
                cursor: pointer;
                font-weight: bold;
                border: none;
                outline: none;
                border-radius: 0;

                @include text-ellipsis;
            }
        }
    }
</style>
